<script setup>

import {Setting, SwitchButton, User} from "@element-plus/icons-vue";
</script>

<template>
  <div class="custom-vertical-menu">
    <!-- 底部任务栏 -->
    <div class="bottom-taskbar">
      <el-menu
          default-active="1"
          class="el-menu-vertical"
      >
        <el-tooltip
            effect="dark"
            placement="right-end"
            content="设置"
        >
          <el-menu-item index="1">
            <el-icon><Setting /></el-icon>
          </el-menu-item>
        </el-tooltip>
        <el-tooltip
            effect="dark"
            placement="right-end"
            content="我的"
        >
          <el-menu-item index="2">
            <el-icon><User /></el-icon>
          </el-menu-item>
        </el-tooltip>
        <el-tooltip
            effect="dark"
            placement="right-end"
            content="退出登录"
        >
          <el-menu-item index="3">
            <el-icon><SwitchButton /></el-icon>
          </el-menu-item>
        </el-tooltip>
      </el-menu>

    </div>
  </div>
</template>

<style scoped>
.custom-vertical-menu {
  display: flex;
  flex-direction: column; /* 纵向排列 */
  position: relative;
  height: 100%; /* 占满整个容器高度 */
  width: 5%; /* 侧边栏宽度 */
  padding: 0;
  margin: 0;
  background: linear-gradient(90deg, #81dffc 0%, #5fa1fc 100%);
}


.bottom-taskbar {
  display: flex;
  flex-direction: column; /* 按列排列任务栏按钮 */
  padding: 0;
  margin: 0;
  background: linear-gradient(90deg, #81dffc 0%, #5fa1fc 100%);
  border: 0;
  justify-content: center; /* 居中排列任务栏内容 */
}

.bottom-taskbar .el-menu-vertical {
  background: transparent; /* 菜单背景透明，与父容器一致 */
}

.bottom-taskbar .el-menu-item {
  margin: 10px 0; /* 按钮之间间隔 */
  color: rgba(37, 14, 117, 0.64); /* 按钮字体颜色 */
  text-align: center; /* 按钮内容居中 */
}

.bottom-taskbar .el-menu-item:hover {
  background: linear-gradient(90deg, #69bad1 0%, #5896f0 100%);
  color: #000000; /* 悬停时字体颜色 */
}
</style>